<template>
	<view>
		<view class="fixed-br" v-if="showTop" @click="toTop">
			<view id='top'>
				<image src="../../static/images/top.png" mode=""></image>
			</view>
		</view>
		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="fill-height el-flex">
						<view class="header-btn2" @click="Back()">
							<image src="../../static/images/left_b.png" mode=""></image>
						</view>
						<view class="placeholder text-ellipsis">
							商品评论
						</view>
						<view class="app-header-right"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="comment-list">
			<view class="comment-header">
				<view class="silder-main">
					<view class="silder">
						<block v-for="(item,index) in comment_tags" :key="index">
							<view class="item el-flex" :class="index==tabIndex?'selected':''" @click="tabIndex=index">
								<text>{{item.tag_name}}</text><text v-if="item.num_desc"
									class="num_desc">{{item.num_desc}}</text>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="comment-list">
				<view class="comment-box">
					<block v-for="(item,index) in commentList" :key="index">
						<view class="item" :class="index!==0?'bd-top-1px':''" @click="toUserComment(item)">
							<view class="comment-header el-flex">
								<view class="avatar-img-box">
									<LazyLoad :src="item.user_avatar" width='100%' height='100%'></LazyLoad>
								</view>
								<view class="user-info ">
									<view class="name">
										{{item.user_name}}
									</view>
									<view class="comment-date">
										{{item.add_time}}
									</view>
								</view>
							</view>
							<view class="comment-content">
								<rich-text :nodes="item.comment_content" class="text"></rich-text>
								<view class="photos"
									:class="item.comment_images&&item.comment_images.length==1?'p1':'p2'">
									<block v-for="(img,imgIndex) in item.comment_images" :key="imgIndex">
										<template v-if="item.comment_images.length==1">
											<LazyLoad 
											@click.native.stop="previewImage(imgIndex,item.comment_images)"
											:src="img" height='3rem' mode="heightFix"></LazyLoad>
										</template>
										<template v-else>
											<LazyLoad 
											@click.native.stop="previewImage(imgIndex,item.comment_images)"
											:src="img" width='1.6rem' height='1.6rem'></LazyLoad>
										</template>
									</block>
								</view>
							</view>
						</view>
					</block>


				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	export default {
		data() {
			return {
				showTop: false,
				tabIndex: 0,
				commodity_id: '',
				commentList: [],
				comment_tags: [],
				page_index: 1,
				profile_id: 0,
				scrollTop: 0
			};
		},
		components: {
			LazyLoad
		},
		watch: {
			tabIndex: {
				handler(newVal) {
					this.profile_id = this.comment_tags[newVal].profile_id
					this.getCommentList(false)
					this.page_index = 1
				}
			},
			scrollTop: {
				handler(newVal) {
					if (newVal >= 700) {
						this.showTop = true
					} else {
						this.showTop = false
					}
				}
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		onReachBottom() {
			this.page_index++
			this.getCommentList(true)
		},
		methods: {
			previewImage(index, photoList) {
				uni.previewImage({
					current: index,
					urls: photoList,
					loop: true,
					indicator: 'number'
				})
			},
			toUserComment(item) {
				uni.navigateTo({
					url: `/subPage/userComment/userComment?comment_id=${item.comment_id}`
				})
			},
			Back() {
				uni.navigateBack(-1)
			},
			previewImage(index, photoList) {
				uni.previewImage({
					current: index,
					urls: photoList,
					loop: true,
					indicator: 'number'
				})
			},
			toTop() {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0,
				})
			},
			getCommentList(flag) {
				this.$request.get('/getCommentList', {
					'commodity_id': this.commodity_id,
					'profile_id': this.profile_id,
					'page_index': this.page_index,
					'page_size': 10,
				}).then((res) => {
					this.comment_tags = res.data.data.detail.comment_tags
					if (flag) {
						this.commentList = this.commentList.concat(res.data.data.comments)
					} else {
						this.commentList = res.data.data.comments
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
		},
		onLoad(e) {

			this.commodity_id = e.commodity_id
			this.getCommentList(0)
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-size: .22rem;
		line-height: 1.15;
		font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
	}

	.header-bar {
		height: 100%;
	}

	.header {
		height: .95rem;
		background-color: rgb(242, 242, 242);

		.fill-height {
			height: 100%;

			.header-btn2 {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;

				image {
					width: 0.5rem;
					height: 0.5rem;
				}
			}

			.app-header-right {
				min-width: 1rem;
			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .3rem;
				min-width: 0;
				width: 100%;
				color: rgb(102, 102, 102);
			}
		}
	}

	.comment-list {
		padding-top: .96rem;
		background: #f2f2f2;
		overflow: hidden;
		color: #3c3c3c;

		.comment-header {
			background: #fff;
			color: #000;
			text-align: center;
			margin-bottom: 0.2rem;
			overflow: scroll;

			.silder-main {
				width: 7.2rem;
				// display: flex;

				.silder {
					width: 7.2rem;
					box-sizing: border-box;
					padding: 0.24rem 0.24rem 0.08rem;
					display: flex;
					flex-wrap: wrap;

					.item {
						font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
						padding: 0.13rem 0.24rem;
						background: #fceeeb;
						border-radius: 0.27rem;
						margin-right: 0.16rem;
						margin-bottom: 0.16rem;
						max-height: 0.53rem;

						.num_desc {
							margin-left: .1rem;
							display: inline-block;
						}
					}

					.selected {
						background: #ec5829;
						color: #fff;
					}
				}
			}
		}

		.comment-list {
			padding-top: 0;

			.comment-box {
				background: #fff;
				text-align: left;

				.bd-top-1px {
					&:before {
						content: "";
						display: block;
						position: absolute;
						border-top: 1px solid #d9d9d9;
						left: 0;
						top: 0;
						width: 100%;
						transform-origin: 0 top;
					}
				}

				.item {
					position: relative;
					padding: 0.24rem 0.32rem 0.32rem;

					.comment-header {
						flex-wrap: nowrap;
						margin-bottom: 0;

						.avatar-img-box {
							margin-right: 0.24rem;
							width: 0.8rem;
							height: 0.8rem;
							overflow: hidden;
							border-radius: 100%;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.user-info {
							flex: 1 1 auto;
							text-align: left;

							.name {
								font-size: .26rem;
							}

							.comment-date {
								margin-top: 0.05rem;
								color: rgba(0, 0, 0, .54);
							}
						}


					}

					.comment-content {
						.text {
							display: inline-block;
							padding: 0.12rem 0;
							line-height: 1.5em;
							font-size: .26rem;
						}

						.photos {
							margin-bottom: 0.12rem;

							image {
								width: 1.6rem;
								height: 1.6rem;
								margin: 0 0.08rem 0.08rem 0;
							}
						}

						.p2 {
							image {
								width: 1.6rem !important;
								height: 1.6rem !important;
							}

							/deep/.muqian-content {
								margin: 0 0.08rem 0.08rem 0;
								display: inline-block;
							}
						}

						.p1 {
							text-align: center;
							height: 3rem;
							width: auto;

							image {
								height: 100%;
							}

							/deep/.muqian-content {
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}
				}
			}
		}
	}
</style>